<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 修改HTML内容最简单的方法是使用innerHTML属性 -->
    <p id="p1">Hello World!</p>
    <script>
        document.getElementById("p1").innerHTML = "Hello Shuanghsuang!"
    </script>
    <h1 id="header">my header</h1>
    <script>
        var element = document.getElementById("header");
        element.innerHTML="MY HEADER";
    </script>

    <!--改变html属性值： document.getElementById("id").attribute = new attribute; -->
    <img id="image" src="../../th (2).jpg">
    <script>
        document.getElementById("image").src="../../th (3).jpg";
    </script>

    <!-- 改变 HTML 样式  document.getElementById("id").style.property = new style; -->
    <p id="p2">Hello World!</p>
    <p id="p3">Hello World!</p>
    <script>
        document.getElementById("p2").style.color = "blue";
        document.getElementById("p2").style.fontFamily = "Arial";
        document.getElementById("p3").style.color = "red";
    </script>

    <!-- 使元素不可见 -->
    <h1 id="id1">我的标题 1</h1>
    <button type="button" onclick="document.getElementById('id1').style.color='red'">click me!</button>

    <p id="testVisibility">毕竟西湖六月中，风光不与四时同。接天莲叶无穷碧，映日荷花别样红。</p>
    <button type="button" onclick="document.getElementById('testVisibility').style.visibility = 'hidden'">hide text</button>
    <button type="button" onclick="document.getElementById('testVisibility').style.visibility = 'visible'">show text</button>
</body>
</html>
